
<template>
  <div>
    <common-head></common-head>
    <div class="video_title">全部视频</div>
    <ul class="video">
      <li v-for="item in imgList" :key="item.id">
        <div class="img">
          <img :src="item.img_url" alt />
          <div class="play" @click="showPopup(item.id,item.img_url)">
            <van-icon name="play" size="5" color="#fff" />
          </div>
        </div>

        <p class="title">{{item.title}}</p>
        <p class="content">{{item.content}}</p>
      </li>
    </ul>
    <!-- 弹出层 -->
    <van-popup v-model="show">
      <div class="player-container">
        <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
      </div>
    </van-popup>
    <common-footer></common-footer>
  </div>
</template>
<script>
// 引入video样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
// 引入hls.js
import 'videojs-contrib-hls.js/src/videojs.hlsjs.js'
export default {
  props: [],
  data () {
    return {
      show: false,
      imgList: [],
      vedioList: [],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        controls: true, // 控制条
        preload: 'auto', // 视频预加载
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4',
            src: '' // 你所放置的视频的地址，最好是放在服务器上
          }
        ],
        poster: '', // 你的封面地址（覆盖在视频上面的图片）

        notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      }
    }
  },

  mounted () {
    this.getimgList()
    this.getvedioList()
  },
  methods: {
    async getimgList () {
      const { data: res } = await this.$http.get('/api/video')
      // console.log(res)
      this.imgList = res.data
      // console.log(this.imgList)
    },
    async getvedioList () {
      const { data: res } = await this.$http.get('/api/video/address')
      // console.log(res)
      this.getvedioList = res.data
    },
    showPopup (id, img) {
      this.show = true
      const a = this.getvedioList.filter((t) => t.id === id)

      this.playerOptions.sources[0].src = a[0].vedio_url
      this.playerOptions.poster = img
      // console.log(this.playerOptions.sources[0].src)
      console.log(this.playerOptions)
    }
  }
}
</script>
<style scoped lang="less">
#app {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
.video_title {
  height: 50px;
  line-height: 50px;
  font-size: 13px;
  background-color: #fff;
  padding-left: 40px;
  margin-top: 50px;
}
.video {
  height: 1200px;
  background-color: #f5f5f5;

  li {
    float: left;
    width: 49%;
    height: 200px;
    background-color: #fff;
    margin-top: 5px;

    .img {
      position: relative;
      width: 100%;
      background-size: cover;
      &:hover .play {
        background-color: #ff6700;
      }
      img {
        width: 100%;
        height: 100%;
      }
      .play {
        position: absolute;
        width: 20px;
        height: 15px;
        border-radius: 50px;
        border: 1px solid #fff;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .van-icon {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .title {
      margin-left: 15px;
      font-size: 10px;
    }
    .content {
      margin-left: 15px;
      margin-top: 10px;
      font-size: 12px;
      color: #757575;
    }
  }
  li:nth-child(even) {
    margin-left: 5px;
  }
}

.van-popup--center {
  width: 100%;
}
</style>
